<!--  -->
<template>
  <el-container v-loading="isLoading" element-loading-text="加载中...">
    <el-main>
      <div class="tag">
        <div class="area">
          地区:
          <span
            :class="{ active: currentIndex === index }"
            @click="areaClick(item, index)"
            v-for="(item, index) in area"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div class="type">
          类型:
          <span
            :class="{ active: currentIndex1 === index }"
            @click="typeClick(item, index)"
            v-for="(item, index) in type"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div class="order">
          排序:
          <span
            :class="{ active: currentIndex2 === index }"
            @click="orderClick(item, index)"
            v-for="(item, index) in order"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>

      <div class="mv-wrapper">
        <div class="video_wrap">
          <div
            class="item_wrap"
            v-for="(item, index) in itemList"
            :key="index"
          >
            <div class="item">
              <div class="cover">
                <el-image
                  @click="toDetail(item.id)"
                  :src="item.cover"
                  fit="cover"
                ></el-image>

              </div>
              <div class="title">{{ item.name }}</div>
              <div class="name">{{ item.artistName}}</div>
            </div>
          </div>
        </div>

      </div>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Math.ceil(count / 32) * 10"
          :pager-count="7"
          @current-change="getAllMv"
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getAllMv } from "util/video.js";
import { mapGetters } from "vuex";

export default {
  name: "",
  data() {
    return {
      itemList: [],
      area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      type: ["全部", "官方版", "原生", "现场版", "网易出品"],
      order: ["上升最快", "最热", "最新"],
      limit: 50,
      currentArea: "全部",
      currentType: "全部",
      currentOrder: "上升最快",
      currentIndex: 0,
      currentIndex1: 0,
      currentIndex2: 0,
      count: 500,
    };
  },
  created() {
    this.getAllMv(1);
  },
  computed: {
    ...mapGetters("musicPlay", [
      // 加载状态
      "isLoading",
    ]),
  },
  methods: {
    areaClick(area, index) {
      this.currentArea = area;
      this.currentIndex = index;
      this.getAllMv(1);
    },
    typeClick(type, index) {
      this.currentType = type;
      this.currentIndex1 = index;
      this.getAllMv(1);
    },
    orderClick(order, index) {
      this.currentOrder = order;
      this.currentIndex2 = index;
      this.getAllMv(1);
    },
    toDetail(id) {
      this.$router.push("/mvDetail/" + id);
      this.$store.dispatch("musicPlay/saveIsPlaying", false);
    },
    async getAllMv(page) {
      this.$store.dispatch("musicPlay/changeIsLoading", true);

      let {
        data: { data },
      } = await getAllMv(
        this.currentArea,
        this.currentType,
        this.currentOrder,
        32,
        32 * (page - 1)
      );
      this.itemList = data;
      this.$store.dispatch("musicPlay/changeIsLoading", false);
    },
  },
};
</script>

<style scoped lang='less'>
.el-main{
  padding: 0px 2.45rem;

}
.tag {
  div {
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 600;
    span {
      display: inline-block;
      color: rgb(117, 110, 110);
      padding: 3px 15px;
      text-align: center;
      border-radius: 10px;
      line-height: 2;
    }
    span:hover {
      background-color: #ddd;
      color: rgb(179, 67, 141);
    }
    span.active {
      color: rgba(211, 57, 141, 0.897);
    }
  }
}
.mv-wrapper {
  // padding: 10px 20px;
    .video_wrap {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill,12.25rem);

    .item_wrap {
      width: 11.25rem;
      .item {
        margin-bottom: 20px;
        .cover {
          position: relative;
          height: 6.75rem;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 13px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
          }
          .count {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            top: 2%;
            right: 2%;
            color: #fff;
          }
          .el-icon-caret-right {
            font-size: 15px;
          }
          .time {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            bottom: 2%;
            right: 2%;
            color: #fff;
          }
        }
        .title {
          font-size: 15px;
          font-weight: 600;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .name {
          font-size: 10px;
          color: #6e6e69;
        }
      }
    }
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ec4141;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:hover {
  color: #ec4141;
}
</style>